<template>
    <view>
        <!-- 救援 -->
        <view style="padding-left: 24rpx;">
            <view class="box-top" v-for="(item, i) in dataList" :key="i">
                <view class="line" :class="{ none: i == dataList.length - 1 }">
                    <!-- 中线 -->
                    <!-- 圆点 -->
                    <view v-if="item.status == 4 || item.status == 6" class="dotpulsImg">
                        <image src="/static/images/maintain/okk.png" mode=""></image>
                    </view>
                    <view v-else class="dot"></view>
                </view>
                <view style="flex: 1">
                    <view class="right-box-top">
                        <!-- 右边 -->
                        <view v-if="item.status == 6 || item.status == 4" class="finish">
                            已完成
                        </view>
                        <text class="rescueName" v-if="item.executor&&(!item.extPlus||!item.extPlus.bType)" >{{ item.executor }}</text>
                        <text class="title">{{ item.typeName == '调度中' ? '创建任务' : item.typeName }}</text>
                        <!-- 这里展示标签 -->
                        <view class="rescueTag" v-if="showRedTag(item) && item.typeName != '已到达'">
                            <view class="redTag" v-if="showRedTag(item) != '倒计时'">
                                <image src="/static/images/maintain/funnelRED.png" mode=""></image>
                                <text v-if="(item.extPlus).desc"> {{ (item.extPlus).desc }}</text>
                                <text v-else>{{
                                    showRedTag(item)
                                }}</text>
                            </view>
                            <view class="redTag" v-else>
                                <image src="/static/images/maintain/funnelRED.png" mode=""></image>
                                <Countdown :endTime="new Date((item.extPlus).timeOut).getTime()
                                    " @finished="finished(item)" />
                                <text>后超时</text>
                            </view>
                        </view>

                        <view v-if="
                            item.typeName.indexOf('已到达') != -1
                        ">
                            <view class="location">
                                <image src="/static/images/maintain/addressRED.png" mode=""></image>
                                <view>定位异常</view>
                            </view>
                            <view class="locationAddress" v-if="item.extPlus&&item.extPlus.locationAddress">
                                {{ (item.extPlus).locationAddress }}
                            </view>
                        </view>
                        <view class="rescueTime" v-if="item.createTime">
                            <image src="/static/images/maintain/times.png" mode=""></image>
                            <text>{{ item.createTime }}</text>
                        </view>
                    </view>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
import Countdown from './Countdown.vue';
export default {
	components: { Countdown },
	data() {
		return {
			now: Date.now(),
			timer: null,
		};
	},
	props: {
		dataList: {
			type: Array,
			default: () => [],
		},
		status: {
			type: [String, Number],
			default: '',
		}
	},
	watch: {
		status: {
			immediate: true,
			handler(newVal) {
				// 先清理旧定时器
				console.log(this.dataList, '源数据');
				if (this.timer) {
					clearInterval(this.timer);
					this.timer = null;
				}
				// 只在 status < 4 时启动定时器
				if (Number(newVal) < 4) {
					this.timer = setInterval(() => {
						this.now = Date.now();
					}, 1000); // 10秒
				}
			},
		},
	},
	beforeDestroy() {
		if (this.timer) {
			clearInterval(this.timer);
			this.timer = null;
		}
	},
	methods: {
		finished(item) {
			this.showRedTag(item);
		},
		showRedTag(item) {
			// console.log(ext, "ext");
			if (item.ext == null) {
				return false;
			} else {
				let obj = (item.extPlus);
				if (obj.bType) {
					if (obj.desc) {
						return true;
					}
					let timeOut = new Date(this.safeParseDate(obj.timeOut)).getTime();
					let now = this.now; // 用响应式的 now
					let diff = timeOut - now;
					// 如果是即将超时到达就为负数就不展示
					// 这里先判断下工单状态如果大于=4 超时未到达预警.超时到达预警要用工单创建时间-timeOut时间
					// 如果是已到达
					if (this.status >= 4) {
						let createTime = new Date(this.safeParseDate(item.createTime)).getTime();
						let overTimeOut = new Date(this.safeParseDate(obj.timeOut)).getTime();
						if (obj.bType == 2) {
							return false;
						}
						// 状态>=0的时候只有超时到达预警标签
						if (obj.bType == 3) {
							let diffStop = overTimeOut - createTime;
							let minutes = Math.floor(Math.abs(diffStop) / 60000);
							let seconds = Math.floor((Math.abs(diffStop) % 60000) / 1000);
							return `超时${minutes}分${seconds}秒`;
						}
						if (obj.bType == 1) {
							if (diff < 0) {
								return false;
							} else {
								return '倒计时';
							}
						}
					} else {
						// 这里是未到达的情况下
						// 这里是即将超时预警需要每隔1秒添加一次,如果超时了不展示,没超过时间就展示倒计时
						if (obj.bType == 1) {
							if (diff < 0) {
								return false;
							} else {
								return '倒计时';
							}
						} else {
							let minutes = Math.floor(Math.abs(diff) / 60000);
							let seconds = Math.floor((Math.abs(diff) % 60000) / 1000);
							return diff > 0
								? `${minutes}分${seconds}秒后超时`
								: `超时${minutes}分${seconds}秒`;
						}
					}
				}
			}
		},
		safeParseDate(str) {
			if (!str) return new Date();
			if (str.indexOf('T') === -1) {
				return new Date(str.replace(' ', 'T'));
			}
			return new Date(str);
		},
	},
};
</script>
<style lang="scss" scoped>
.rescueTag {
    margin: 6px 0 4px 0;

    text {
        color: #e02020;
        font-size: 12px;
    }
}

.redTag {
    display: flex;
    align-items: center;
    color: #e02020;
    font-size: 12px;

    image {
        width: 28rpx;
        height: 28rpx;
    }
}

.box-top {
    line-height: 30rpx;
    width: 100%;
    box-sizing: border-box;
    display: flex;
    flex-direction: row;
    font-size: 24rpx;

    .left-box-top {
        text-align: left;
        font-size: 24rpx;

        color: #0091ff;
    }

    .left-box-top-main {
        width: 160rpx;
        text-align: left;
        font-size: 24rpx;

        margin-left: 30rpx;
    }

    .line {
        width: 2rpx;
        background-color: rgba(228, 231, 237, 1);
        margin: 0 30rpx 0 20rpx;

        .dotpulsImg {
            width: 80rpx;
            height: 80rpx;
            position: relative;
            left: -14rpx;
            top: -6rpx;

            image {
                width: 28rpx;
                height: 28rpx;
                background: #fff;
            }
        }

        .dot {
            width: 12rpx;
            height: 12rpx;
            background-color: #ffffff;
            border: 2rpx #0091ff solid;
            border-radius: 50%;
            position: relative;
            left: -6rpx;
            top: 0;
        }

    }

    .right-box-top {
        padding: 12rpx 10rpx 10rpx;
        position: relative;
        top: -20rpx;
        flex: 1;
        font-size: 28rpx;
        font-weight: 500;
        color: #999999;

        .finish {
            color: #0091ff;
            margin-top: -6rpx;
        }

        .rescueName {
            color: #0091FF;
            font-size: 24rpx;
            font-weight: 500;
        }

        .title {
            color: #333333;
            font-size: 24rpx;
            font-weight: 600;
        }

        .actImg {
            margin-bottom: 10rpx;

            image {
                width: 30rpx;
                height: 30rpx;
                margin-right: 6rpx;
                vertical-align: top;
                margin-bottom: 4rpx;
                display: inline-block;
            }

            .acTaddress {
                display: inline-block;
                width: 400rpx;
                color: #666;
            }
        }

        .leftAct {
            width: 448rpx;
            height: 30rpx;
            font-size: 24rpx;
            margin-bottom: 20rpx;
            position: relative;

            text {
                display: inline-block;
            }

            text:nth-child(1) {
                width: 120rpx;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
                color: #0091ff;
            }

            text:nth-child(2) {
                width: 160rpx;
                overflow: hidden;
                color: #333333;
                font-weight: 600;
            }

            .leftAct_ci {
                color: #0091ff;
                float: right;
                margin-right: 20rpx;
                cursor: pointer;
                font-weight: 400;
                display: flex;
                align-items: center;
            }

            .rescueName {
                position: absolute;
                left: 0;
                top: 0;
            }

            .rescueUser {
                margin-left: 120rpx;
            }

            .tasksShow {
                display: inline;
                width: auto !important;
                margin-right: 10rpx;
            }

            .tasksText {
                display: inline;
                color: #333333;
                font-weight: 600;
            }
        }

        .leftAct-main {
            height: 30rpx;
            font-size: 28rpx;
            line-height: 1;
            margin-bottom: 10rpx;

            text {
                display: inline-block;
            }

            .leftAct_name {
                color: #333333;
                font-weight: 400;
                margin-left: 10rpx;
            }

            .leftAct_text {
                color: #0091ff;
                float: right;
                margin-right: 20rpx;
            }
        }

        .content {
            margin: 20rpx 0 20rpx 0;
        }
    }

    .bgColor {
        background: #0091ff;
        border-radius: 8rpx;
        color: #ffffff !important;
    }

    .location {
        display: flex;
        font-size: 24rpx;
        align-items: center;
        margin-top: 8rpx;
        color: #E02020;

        image {
            width: 28rpx;
            height: 28rpx;
        }
    }

    .locationAddress {
        font-size: 24rpx;
        color: #666666;
        padding-left: 26rpx;
        padding-top: 4rpx;
    }

    .rescueTime {
        display: flex;
        font-size: 24rpx;
        align-items: center;
        margin-top: 8rpx;

        image {
            width: 28rpx;
            height: 28rpx;
        }
    }

    .error {
        color: #E02020;
    }
}
</style>